// 公用样式

@mixin size($w: 100vw, $h: auto) {
    width: $w;
    height: $h;
}

$base-size : 75px;

// 写一个函数把px转换为rem  @function  函数名 （形参）{@return  函数返回值}

@function px2rem($val) {
    @return $val/$base-size * 1rem;
}
// 头部布局
@mixin header {
    @include size(100%, px2rem(100px));
    line-height: px2rem(100px);
    text-align: center;
    font-size: px2rem(35px);
    color: #fff;
    background: skyblue;
}
// 大盒子felx布局
@mixin flex {
    @include size(100%, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}